<template>
  <!-- 顶部栏 -->
  <van-nav-bar title="首页" placeholder fixed />
  <!-- 搜索框 -->
  <van-search v-model="value" shape="round" placeholder="请输入搜索关键词"
    @search="$router.push('/searchRes?keyword=' + value)">
    <template #action>
      <div @click="$router.push('/searchRes?keyword=' + value)">搜索</div>
    </template>
  </van-search>
  <!-- 轮播图 -->
  <van-swipe :autoplay="3000" lazy-render>
    <van-swipe-item v-for="image in images" :key="image.bannerid">
      <img :src="image.img" class="swipe-img" />
    </van-swipe-item>
  </van-swipe>
  <!-- 商品内容部分 -->

  <van-row :gutter="[6, 10]" class="goods">
    <van-col span="12" v-for="item in showData" :key="item.proid" @click="onProductClick(item.proid)">
      <van-card :price="Math.round(item.originprice * item.discount) / 10" :desc="item.desc" :title="item.proname"
        :thumb="item.banners[0]" :origin-price="item.originprice" />
    </van-col>
  </van-row>
  <!-- 分页器 -->
  <van-pagination v-model="currentPage" :total-items="allDataLength" :items-per-page="20" :show-page-size="5"
    force-ellipses id="Paging" @change="changePage($event)" />
  <van-tabbar v-model="active" route placeholder>
    <van-tabbar-item icon="home-o" to="/">首页</van-tabbar-item>
    <van-tabbar-item icon="apps-o" to="/category">分类</van-tabbar-item>
    <van-tabbar-item icon="shopping-cart-o" to="/cart" :badge="cartArr.length">购物车</van-tabbar-item>
    <van-tabbar-item icon="user-o" to="/my">我的</van-tabbar-item>
  </van-tabbar>
</template>

<script setup>
import { bannerReq, homeDataReq } from '@/api/home'
import { onMounted, ref } from 'vue'
import { useRouter } from 'vue-router'
const currentPage = ref(1)
let active = ref(0)
let allData = ref([])
let allDataLength = ref(0)
let showData = ref([])
let value = ref('')
let images = ref([])
let router = useRouter()
//点击跳转详情页
function onProductClick(productId) {
  // 保存当前滚动位置
  localStorage.setItem('scrollPosition', window.scrollY)
  console.log('保存位置1:', window.scrollY)

  router.push('/item?proid=' + productId)
}
onMounted(() => {
  //获取位置若有到相应位置
  const savedPosition = localStorage.getItem('scrollPosition')
  if (savedPosition) {
    window.scrollTo({
      top: parseInt(savedPosition),
      left: 0,
    })
    console.log('恢复位置1:', savedPosition)
  }
})

//获取所有数据
function getallData() {
  homeDataReq(1, 150)
    .then((res) => {
      // console.log(res.data.data)
      allData.value = res.data.data
      allDataLength.value = allData.value.length
      changePage()
    })
  bannerReq().then((res) => {
    // console.log(res.data)
    images.value = res.data.data
  })
}

//换页
function changePage(e = 1) {
  showData.value = allData.value.slice((e - 1) * 20, e * 20)
  // console.log(showData.value)
}
getallData()
import { cartArr, loadCartList } from "@/stores/cart";
import { getlocalStorage } from '@/utils/localStorage'
if (getlocalStorage.token) loadCartList();
</script>

<style scoped>
.goods-card {
  margin: 0;
  background-color: white;
}

.goods {
  margin: 0 6px;
  padding-bottom: 6vh;
}

#Paging {
  position: fixed;
  width: 100%;
  bottom: 50px;
  left: 0;
}

.swipe-img {
  width: 100%;
}
</style>
